﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Post.aspx.cs" Inherits="DynaBoard.PostPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title><%= this.op.Title %></title>
    <style type="text/css">
    li { list-style-type: none; padding-top: 5px; padding-bottom: 5px; }
    div { font-family: arial; font-size: small; }
    .small { font-size: smaller; color: Gray; }
    a { text-decoration: none; }
    .arrows { font-family: Wingdings 3; }
    </style>
</head>
<body>
  
    [Back to <a href="board.aspx?id=<%= this.board.Id %>"><%= this.board.Name %></a> board&nbsp;|&nbsp;<a href="help.aspx">Help</a>]<br />
    
    <div id="root"></div>
    
    <div id="scrollBar"></div>
  
<div id="PostTemplate">
<!--
    <li id="li$POST_ID" style="width:550px">
        <div style="padding-bottom:3px">
            <span class="small"><span id="votes$POST_ID">$POST_VOTES</span> <a href="#" onclick="voteFor($POST_ID); return false">+</a>/<a href="#" onclick="voteAgainst($POST_ID); return false"><b>&ndash;</b></a></span>
            <span id="title$POST_ID">$POST_TITLE</span>
            <span class="small">$POST_AUTHOR <span class="timePassed" timePassed="$POST_DTRAW">$POST_DATETIME</span></span>
            <span class="small" style="color:black" id="op$POST_ID"></span><br/> 
        </div>
        
        <div id="body$POST_ID">$POST_BODY<br/>
            <a class="small" href="#" onclick="showReply($POST_ID); return false;">reply</a>&nbsp;
            <a class="small" href="<%= DynaBoard.Website.RootUri(this.Request) %>Post.aspx?id=<%= this.op.Id %>#li$POST_ID">link</a>&nbsp;
            <a class="small" href="#li$POST_PARENTID">parent</a>
        </div>
    </li>
    
    <div id="reply$POST_ID" style="padding-bottom: 5px; display:none">
        <table id="replyUser$POST_ID" style="position: relative; left: -2px">
            <tr>
                <td class="small">Optional Name</td>
                <td class="small">Optional Email</td>
            </tr>
            <tr>
                <td><input type="text" id="replyName$POST_ID" style="width: 184px" maxlength="<%= DynaBoard.UserInputString.MaxLength(typeof(DynaBoard.AuthorName)) %>" /></td>
                <td><input type="text" id="replyEmail$POST_ID" style="width: 184px" maxlength="<%= DynaBoard.UserInputString.MaxLength(typeof(DynaBoard.AuthorEmail)) %>"  /></td>
            </tr>
        </table>
        <textarea id="replyTextArea$POST_ID" style="width: 376px; height: 125px; padding-bottom: 10px"></textarea><br />
        <input type="button" value="Submit" onclick="SubmitReply($POST_ID)" />
        <input type="button" value="Cancel" onclick="$('#reply$POST_ID').hide();"/>
    </div>
-->
</div>

</body>
</html>


<script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/jsonAspNet.js"></script>
<script type="text/javascript" src="js/Repeater.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/prototypes.js"></script>
<script type="text/javascript" src="js/fadeBackground.js"></script>
<script type="text/javascript" src="js/timePassed.js"></script>
<script type="text/javascript">

var PREVW_PANE_WIDTH = 15;
var FADE_START_COLOR = [145,198,231];
var FADE_TIME = 30000;

var authorName = "<%= this.replyAuthorName %>";
var authorEmail = "<%= this.replyAuthorEmail %>";

function voteFor(postId) {
    $("#votes" + postId).html(parseInt($("#votes" + postId).html())+1);
    $.jsonAspNet("Post.aspx", "VoteFor", { postId: postId });
}

function voteAgainst(postId) {
    $("#votes" + postId).html(parseInt($("#votes" + postId).html())-1);
    $.jsonAspNet("Post.aspx", "VoteAgainst", { postId: postId });    
}

function showReply(postId) {
    $("#reply" + postId).show();
    
    if (authorName || authorEmail) {
            $("#replyUser" + postId).hide();
    }
    
    /*if (authorName)
    {
        $("#replyName" + postId).attr("disabled", true);
        $("#replyName" + postId).val(authorName);
    }
  
    if (authorEmail)
    {
        $("#replyEmail" + postId).attr("disabled", true);
        $("#replyEmail" + postId).val(authorEmail);
    }*/
}

function SubmitReply(postId)
{
    if($("#replyTextArea" + postId).val().trim().length === 0) {
        alert("A post cannot be empty.");
        $("#replyTextArea" + postId).focus();
        return;
    }

    if (!authorName) {
        authorName = $("#replyName" + postId).val();
    }

    if (!authorEmail) {
        authorEmail = $("#replyEmail" + postId).val();
    }

    $.jsonAspNet (
        // Send post
        "Post.aspx", "SubmitPost", {
            postBody: $("#replyTextArea" + postId).val(),
            postId: postId,
            authorName: authorName,
            authorEmail: authorEmail
        }, 
        // Success
        function(newPostId) { 
            $("#replyTextArea" + postId).val("");
            $("#reply" + postId).hide();
            fetchThread(newPostId);
        }
    );
}

// List of posts in thread that have been retrieved already, used by FetchThread() and DisplayThread()
var postIds = [];

function displayThread(posts) {
    var newPostIds = [];
    
    // Sort post by votes first,
    
    posts.sort(function(a, b) {
        return a.Votes - b.Votes;
    });
    
    // Then by date

    posts.sort(function(a, b) {
        return a.UnixTime - b.UnixTime;
    });
    
    // Draw each post

    jQuery.each(posts, function() {
        // Add it to list of posts not to fetch in the future
    
        postIds.push(this.Id);
        newPostIds.push(this.Id);
        
        // Where to display the (new) post in thread
        
        var appendTo = "";
        
        if (this.ParentId === null) {
            // Current post is original that started thread
            appendTo = "root";
        }
        else {
            // Current post is reply to original post
            appendTo = "ol" + this.ParentId;
        }
        
        // The <li> and reply box HTML for the post
        
        this.toHTML = function() {
            var temp = new Template(document.getElementById("PostTemplate"));
            
            temp.replace("$POST_ID", this.Id);
            temp.replace("$POST_TITLE", this.Title || "");
            temp.replace("$POST_DATETIME", timePassed(this.UnixTime));
            temp.replace("$POST_DTRAW", this.UnixTime);
            temp.replace("$POST_BODY", this.Body);
            temp.replace("$POST_PARENTID", this.ParentId);
            temp.replace("$POST_VOTES", this.Votes);
            
            var author = "";
            
            if (this.Author) {
                author = this.Author;
            }
            else {
                author = "Anonymous";    
            }
           
            if (this.Email) {
                author = "<a href='mailto:" + this.Email + "'>" + author + "</a>";
            }
            
            temp.replace("$POST_AUTHOR", "by " + author + " ");
            
            return temp.markup;
        };
        
        // 
        
        $("#" + appendTo).append("<ol id='ol" + this.Id + "' style='background-color: lightblue; border-left:dotted 1px lightgray;'></ol>");
        $("#ol" + this.Id).html(this.toHTML());
        
        // Customize title for original post in thread
        
        if (this.ParentId === null) {             
            $("#title" + this.Id).css("font-size", "24px")
                                 .css("font-weight", "bold")
                                 .css("font-family", "times new roman")
                                 .css("color", "black")
                                 .after("<br>");
        }
        else if (this.Op === true) {
            $("#op" + this.Id).html(" [Original Poster]").css("background-color", "rgb(145,198,231)");
        }
        
        // Color new post's background blue and fade to white over 30 secs
        
        fadeBackground("ol" + this.Id,FADE_START_COLOR,[255,255,255],FADE_TIME);

    });
         
    // Draw the post on the preview pane
    
    var bottomMost = 0;
    
    for(var i = 0; i < postIds.length; i++) {
        var id = postIds[i];
        var top = $("#li"+id).offset().top;
        
        if (top > bottomMost) {
            bottomMost = top;
        }
    }

    if (bottomMost > $(window).height()) {
        $("#scrollBar").css({
            backgroundColor: "white",
            height: $(window).height(),
            width: PREVW_PANE_WIDTH,
            position: "absolute",
            top: $(window).scrollTop(),
            right: 0,
            margin: 0
        });
        
        for(var i = 0; i < newPostIds.length; i++) {
            var id = newPostIds[i];
                
            $("#scrollBar").append("<a href='#li"+id+"'><span id='scroll"+id+"'></span></a>");
            
            $("#scroll"+id).css({
                position: "absolute",
                width: PREVW_PANE_WIDTH,
                height: 2,
                cursor: "hand",
                top: Math.round($(window).height()*$("#li"+id).offset().top/$(document).height())
            });
        
            fadeBackground("scroll"+id,FADE_START_COLOR,[255,255,255],FADE_TIME);
         
            setTimeout(function() {
                $("#scroll"+this.Id).remove();
            }, FADE_TIME);
        }
    }
}

// Request for new posts, called by RefreshThread() and SubmitReply()

function fetchThread(focusOnPostId) {
    $.jsonAspNet("Post.aspx", "FetchThread", { postId: <%= this.op.Id %>, gottenPosts: postIds }, function(posts) {
        displayThread(posts);
        
        if (focusOnPostId) {
            $.scrollTo($("#li" + focusOnPostId), 800);
        }
    }); 
}

//function updatePostOrder() {
//    for (var i = 0; i < post.length; i++) {
//        // For all of post i's peers
//        
//        var peers = [];
//        
//        for (var n = 0; n < post.length; n++) {
//            if (post[i].ParentId == post[n].ParentId && post[i] != post[n]) {
//                peers.push(post[n]);
//            }
//        }
//        
//        // No peers? Leave
//        
//        if (peers.length == 0) {
//            continue;
//        }
//        
//        // Sort by votes, then and date
//        
//        peers.sort(function(a, b) {
//            return a.Votes - b.Votes;
//        };
//        
//        peers.sort(function(a, b) {
//            return a.UniixTime - b.UnixTime;
//        };
//        
//        
//    }
//}

$(document).ready(function() {
    // Display the thread

    fetchThread();
     
    setInterval(function() {
        fetchThread();
   
        // Update votes
    
        $.jsonAspNet("Post.aspx", "Votes", { posts: postIds }, function(votes) {
            for (i = 0; i < votes.length; i++) {
                $("#votes" + votes[i].Key).html(votes[i].Value);    
            }
        }); 
        
//        updatePostOrder();
        
        // Update timestamps
   
        jQuery.each($(".timePassed"), function() {
            $(this).html(timePassed(parseInt($(this).attr("timePassed"))));
        });
    
    }, 10000);
    
    // Setup the preview pane
    
    $(window).scroll(function() {
        $("#scrollBar").css("top", $(window).scrollTop()); 
    });
    
    $(window).resize(function() {
        $("#scrollBar").css("height", $(window).height()); 
    });
    
    $("#scrollBar").css({
        backgroundColor: "white",
        height: $(window).height(),
        width: PREVW_PANE_WIDTH,
        position: "absolute",
        top: 0,
        right: 0,
        margin: 0
    });
});

</script>